<template>
  <div class="wrapper">
    <div class="head">
      <img @click="go()" src="../../assets/img/shouye/header-xinpin/back.png" alt="">
      <span>订单详情</span>
    </div>
    <div class="haiguan">
      <p>根据海关要求，实名信息的真实姓名与支付方式的姓名需一致否则会导致清关失败无法发货</p>
    </div>
    <div class="xinxi">
      <ul>
        <li>
          <span>李四</span>
          <span>15012341234</span>
        </li>
        <li>
          <p>河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室；邮编453000</p>
          <div>修改地址</div>
        </li>
      </ul>
    </div>
    <div class="xian">
      <img src="../../assets/img/cart/xian.png" alt="">
    </div>
    <div class="xian2">
      <img src="../../assets/img/cart/xian.png" alt="">
    </div>
    <div class="shiming">
      <ul>
        <!--verify：证实-->
        <li class="verify">
          <span>实名认证</span>
          <span>请确保姓名与支付方式的姓名一致</span>
        </li>
        <li class="shenfen">
          <span>李四</span>
          <span>4107*************5</span>
        </li>
        <li class="delete">
          <img src="../../assets/img/cart/delate.png" alt="">
          <span>编辑</span>
          <img src="../../assets/img/cart/write.png" alt="">
          <span>删除</span>
        </li>
      </ul>
    </div>
    <div class="zhengming">
      <img src="../../assets/img/cart/dian.png" alt="">
    </div>
    <div class="haiyou">
      <ul>
        <li><span>海外直邮订单</span></li>
        <li v-for="danzi in 2" class="danzi">
          <div class="tu">
            <img src="../../assets/img/cart/mifen.png" alt="">
          </div>
          <div class="rit">
            <p>会呼吸湿滑蜜粉</p>
            <p>规格:蜜粉</p>
            <span>￥166.06</span>
            <span>x 1件</span>
          </div>
        </li>
        <li class="jian">
          <span>收起</span>
          <img src="../../assets/img/cart/topjiantou.png" alt="">
        </li>
      </ul>
    </div>
    <div class="txt">
      <ul>
        <li class="qian">
          <span>商品金额:</span>
          <span>￥332.12</span>
        </li>
        <li class="qian">
          <span>订单邮费:</span>
          <span>￥50.00</span>
        </li>
        <li class="qian">
          <span>关税:</span>
          <span>￥10</span>
        </li>
        <li class="qian">
          <span>订单金额:</span>
          <span>￥392.12</span>
        </li>
        <li class="txt2">
          <p>
            <span>安全提醒:</span>付款成功后，阿拉灯不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款的损失。如有疑问请咨询客服，谨防电话诈骗！
          </p>
        </li>
      </ul>
    </div>
    <div class="peisong">
      <span>配送方式:</span>
      <span>日本直邮</span>
    </div>
    <div class="erjian">
      <ul>
        <li class="shopping">
          <span>共2件商品</span>
          <div>应付:<span>￥392.12</span></div>
        </li>
        <li class="xieyi">
          <img src="../../assets/img/cart/duihao.png" alt="">
          <span>本人同意并接受《个人委托协议》和《用户协议》</span>
        </li>
        <li @click="gocarty" class="queren"><span>确认</span></li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    methods:{
      gocarty(){
        this.$router.push({path:'carty'})
      },
      go(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  .wrapper{
    background: #f2f2f2;
  }
  .head{
    background: #e53e42;
    height: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .head img{
    height: 1rem;
    display: block;
    margin-left: 0.5rem;
  }
  .head span{
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 0.8rem;
  }
  .haiguan{
    background: #666666;
    color: #fff;
    font-size: 0.6rem;
    padding: 0 0.3rem;
    margin-bottom: 0.5rem;
  }
  .xinxi{
    background: #fff;
    margin-bottom: 0.5rem;
  }
  .xinxi ul{
    padding:0.3rem 0.5rem;
  }
  .xinxi ul li:first-child span{
    font-size: 0.8rem;
    margin-right: 10%;
  }
  .xinxi ul li:last-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .xinxi ul li:last-child p{
    font-size: 0.4rem;
    width: 60%;
  }
  .xinxi ul li:last-child div{
    font-size: 0.7rem;
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    padding: 0.1rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 50%;
  }
  .xian{
    position: absolute;
    top: 3.3rem;
  }
  .xian2{
    position: absolute;
    top: 7.5rem;
  }

  .xian img{
    width: 100%;
  }
  .xian2 img{
    width: 100%;
  }
  .shiming{
    width: 100%;
    position: absolute;
    top: 9.2rem;
  }
  .shiming ul li{
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
  }
  .shiming .verify span:last-child{
    background: #f9d3d4;
    color: #e53e42;
  }
  .shenfen span:last-child{
    margin-left: 2rem;
  }
  .delete{
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .delete img{
    width: 0.5rem;
    margin-left: 0.5rem;
  }
  .zhengming{
    margin:0.5rem 0;
    width: 100%;
    /*height: 2rem;*/
    background: #fff;
  }
  .zhengming img{
    width: 100%;
  }
  .haiyou{
    background: #fff;
  }
  .haiyou li{
    padding: 0.3rem;
  }
  .haiyou li:first-child{
    font-size: 0.6rem;
    border-bottom: 1px solid #ccc;
  }
  .haiyou .danzi{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .haiyou .tu img{
    height: 2rem;
    padding: 1rem;
  }
  .haiyou .rit p{
    font-size: 0.6rem;
  }
  .haiyou .rit span{
    font-size: 0.5rem;
  }
  .haiyou .rit span:nth-of-type(1){
    color: #e53e42;
  }
  .jian{
    text-align: center;
  }
  .jian span{
    font-size: 0.5rem;
  }
  .jian img{
    height: 0.4rem;
  }
  .txt{
    background: #fff;
  }
  .txt li{
    padding:0.1rem 0.3rem;
  }
  .txt .qian{
    font-size: 0.5rem;
    border-bottom: 1px solid #ccc;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
  }
  .txt .qian span:last-child{
    color: red;
  }
  .txt2{
    font-size: 0.5rem;
  }
  .txt2 span{
    color: #e53e42;
  }
  .peisong{
    margin: 0.5rem 0;
    font-size: 0.6rem;
    background: #fff;
    display: flex;
    padding:0.1rem 0.3rem;
    justify-content: space-between;
  }

  .erjian ul li{
    padding: 0.3rem;
    font-size: 0.6rem;
    background: #fff;
  }
  .erjian .shopping{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .erjian .shopping div>span{
    color: #e53e42;
  }
  .xieyi{
    text-align: center;
  }
  .xieyi img{
    width: 0.5rem;
  }
  .queren{
    text-align: center;
  }
  .queren span{
    background: #e53e42;
    padding: 0 4rem;
    border-radius: 1rem;
    color: #fff;
  }
</style>
